<template>
  <view>
    <view class="nav-box">
    <view class="nav-itme" @click="gotoPosition('/pages/Classroom/Classroom')">
      <image src='http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5uIT4uDU41V7jkAcAFzjJtd36q9Lc49c4nc8G8nO2g9uDHV2y*eBBEOfEusOi7X8BW8fpeOl80QSihHipqpkvc0!/b&bo=yADIAMgAyAADGTw!&rf=viewer_4' mode=""></image>
     <text>生活贴士</text>
    </view>
    <view class="nav-itme">
      <image src='http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5uIT4uDU41V7jkAcAFzjJteF7hg.zudgtMic1YF8V5AkJftmOlFgNBtlAx3DJrenTAcwq7QpR7n2zwGIoiZRG8Y!/b&bo=yADIAMgAyAADGTw!&rf=viewer_4' mode=""></image>
     <text>我的活动</text>
    </view>
    <view class="nav-itme" @click="gotoPosition('/pages/Community/Community')">
      <image src='http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5vglhlHObDPHNd4iHnCQ2syxLS2yOwmdrUSJ1C95uExNEJOz5BFIyEY4HFpBZ2m3flo9MBuSMEB1ToBAYkVoXOM!/b&bo=yADIAMgAyAADGTw!&rf=viewer_4' mode=""></image>
      <text>我的社区</text>
    </view>
    <view class="nav-itme" @click="gotoMessage">
       <image src='http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5uIT4uDU41V7jkAcAFzjJtdq0h3VejDq*Bx*easfN5VwTX4EZxXzEQ63IVSFX*3mxrdRObnUf7hJ0NnHlzzux4E!/b&bo=yADIAMgAyAADGTw!&rf=viewer_4' mode=""></image>
       <text>社区公告</text>
    </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"H-navimg",
    data() {
      return {
        
      };
    },
    methods:{
      // 跳转到指定tabbar页面
      gotoPosition(position){
        uni.switchTab({
          url:position
        })
      },
      gotoMessage(){
        uni.navigateTo({
          url:'/subpkg/activeMessage/activeMessage'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
 .nav-box{
    display: flex;
    justify-content: space-around;
    margin: 60rpx 0;
    .nav-itme{
      height: 140rpx;
      width: 128rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image{
        height: 100%;
        width: 100%;
      }
      text{
        margin: 10rpx;
        font-size: 24rpx;
      }
    }
  }

</style>